<template>
  <a-drawer
      v-model:visible="visible"
      :title="modalTitle"
      :closable="false"
      width="75%"
      :footer-style="{ textAlign: 'right' }"
      @close="handleCancel"
  >
    <a-form ref="formRef" :model="formState" :label-col="{ span: 3 }">
      <a-form-item
          label="公告名称"
          name="title"
          :rules="[{ required: true, message: '请输入公告名称' }]"
          :wrapper-col="{ span: 12 }"
      >
        <a-input v-model:value="formState.title" placeholder="请输入公告名称"/>
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number
            v-model:value="formState.sort"
            placeholder="请输入排序"
            style="width: 250px"
        />
      </a-form-item>
      <a-form-item
          label="公告内容"
          name="content"
          :rules="[{ required: true, message: '请输入公告内容' }]"
      >
        <Editor :content="formState.content" @getContent="getContent" :eheight="800"></Editor>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
  </a-drawer>
</template>
<script setup>
import useModal from "@/utils/useModal";
import {reactive, ref} from "vue";
import {message} from "ant-design-vue";
import {add, edit, info} from "@/api/notice";

const {visible, modalTitle} = useModal();

const emits = defineEmits(["model-success"]);
const formRef = ref();

const formState = reactive({
  title: "",
  sort: 0,
  content: '',
  notice_id: null,
});

const show = (model) => {
  visible.value = true;
  modalTitle.value = model ? "编辑公告" : "新增公告";
  if (model && model.notice_id) {
    formState.notice_id=model.notice_id
    getDetails(model.notice_id);
  } else {

  }
};
const getDetails = (id) => {
  info({
    id: id,
  }).then((res) => {
    if (res.code === 0) {
      const data = res.data;
      resetForm(data);
    }
  });
};
const getContent = (values) => {
  formState.content = values;
};
//设置表单的值
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
// 保存
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    let params = {
      ...formState,
    };
    if (formState.notice_id) {
      edit({
        id: formState.notice_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {

          message.success(res.msg);
          formRef.value.resetFields()
          emits("model-success");
          visible.value = false;

        }
      });
    } else {
      //添加
      add({...params}).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields()
          visible.value = false;
          emits("model-success");
        }
      });
    }
  });
};
// 关闭
const handleCancel = () => {
  formRef.value.resetFields()
  visible.value = false;
};
defineExpose({
  show,
});
</script>